<template>
  <div id="buildingDamageEstimate-map" style="width:100%;height:658px"></div>
  <div id="buildingDamageEstimate-mapDiv" class="ol-popup">
    <!-- 显示控件 -->
    <div id="buildingDamageEstimate-setDivPosition"  class="init-setDivPosition">
      <!-- 切换卫星和街道地图 -->
			<p @click="switchMap" class="init-setDivPosition-selected">
				<template v-if="switchMapBool==false">
					<img src="@/assets/map/image/weixing-b.png" title="切换卫星地图"><br/><span>卫星图</span>
				</template>
				<template v-else>
					<img src="@/assets/map/image/jiedao-b.png" title="切换街道地图"><br/><span>街道图</span>
				</template>
			</p>
			<!-- 返回主界面 -->
			<p @click="zoomDefaultPosition" :class="{ 'init-setDivPosition-selected': zoomDefaultPositionBool==true }">
				<img src="@/assets/map/image/newImage/home.png" title="返回主界面"><br/><span>主界面</span>
			</p>
			<!-- 显示工具箱 -->
			<p @click="showHideToolsBoxDiv" :class="{ 'init-setDivPosition-selected': showHideToolsBox==false }">
				<template v-if="showHideToolsBox">
					<img src="@/assets/map/image/tools.png" title="打开工具箱"><br/><span>工具箱</span>
				</template>
				<template v-else>
					<img src="@/assets/map/image/tools.png" title="关闭工具箱"><br/><span>工具箱</span>
				</template>
			</p>
      <!-- 选择快速地震影响场 -->
      <p @click="showSeismicInfluenceSelect" :class="{ 'init-setDivPosition-selected': showSeismicInfluenceSelectBool==true }">
        <img src="@/assets/map/image/newImage/icon-manage.png" title="选择快速地震影响场"><br/><span style="font-size:12px;">地震影响场</span>
      </p>
      <!-- 评估 -->
      <p @click="showCreateEstimateResult" :class="{ 'init-setDivPosition-selected': showCreateEstimateResultBool==true }">
        <img src="@/assets/map/image/icon-评估结果.png" title="评估"><br/><span style="border:0;">评估</span>
      </p>
    </div>
    <!-- 工具箱 -->
		<div id="buildingDamageEstimate-ToolsBoxDiv" class="init-ToolsBoxDiv">
			<p @click="measureToolBox" :class="{ 'init-setDivPosition-selected': showHideMeasureTool==false }">
				<template v-if="showHideMeasureTool">
					<img title="开启测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
				</template>
				<template v-else>
					<img title="关闭测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
				</template>
			</p>
			<p @click="positionToolBox" :class="{ 'init-setDivPosition-selected': showHidePositionTool==false }">
        <template v-if="showHidePositionTool">
          <img title="开启定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
        <template v-else>
          <img title="关闭定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
      </p>
		</div>
    <!-- 所有工具 -->
    <div id="buildingDamageEstimate-AllToolsDiv" class="init-AllToolsDiv">
      <!-- 测量工具 -->
      <div id="buildingDamageEstimate-MeasureToolsDiv" class="init-AllToolsDivFloat">
        <p @click="measureDistance" :class="{ 'init-setDivPosition-selected': measureDistanceBool==false }">
          <template v-if="measureDistanceBool">
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="measureArea" :class="{ 'init-setDivPosition-selected': measureAreaBool==false }">
          <template v-if="measureAreaBool">
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="stopMeasure" :class="{ 'init-setDivPosition-selected': stopMeasureBool==false }">
          <template v-if="stopMeasureBool">
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="clearMeasure" :class="{ 'init-setDivPosition-selected': clearMeasureBool==false }">
          <template v-if="clearMeasureBool">
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
        </p>
      </div>
      <!-- 定位工具 -->
      <div id="buildingDamageEstimate-MousePositionDiv">
        <span><img class="init-jingd" src="@/assets/map/image/jingd.png" title="鼠标左键在地图上点击位置的经度值"></span>
        <input id="buildingDamageEstimate-MousePositionLon" type="text" value="">
        <span><img class="init-weid" src="@/assets/map/image/weid.png" title="鼠标左键在地图上点击位置的纬度值"></span>
        <input id="buildingDamageEstimate-MousePositionLat" type="text" value="">
        <p @click="clearPosition" :class="{ 'init-setDivPosition-selected': clearPositionBool==false }">
          <template v-if="clearPositionBool">
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="addPosition" :class="{ 'init-setDivPosition-selected': addPositionBool==false }">
          <template v-if="addPositionBool">
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import {Vector as VectorSource} from 'ol/source'
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {Select, Draw, Modify, Snap, Translate} from 'ol/interaction';
import {unByKey} from 'ol/Observable';
import CircleDraw from 'ol/geom/Circle';
import Overlay from 'ol/Overlay';
import Polygon from 'ol/geom/Polygon';
import {boundingExtent} from 'ol/extent';
import LineString from 'ol/geom/LineString';
import WKT from 'ol/format/WKT';
import {getArea, getLength} from 'ol/sphere';
import {Fill, Stroke, Style, Icon, Circle,Text} from 'ol/style';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';
import { getProjection, getTiandituVecMap, getTiandituVecText,getTiandituImgMap, getTiandituImgText } from "@/map/projMap.js";

export default({
  name: 'BuildingDamageEstimateMap',
  props:{
    shpLegendList:{//灾区范围图例列表
      type:Array,
      required:false,
      default: []
    },
    shpDataList: {//灾区范围空间数据列表
      type:Array,
      required:false,
      default: []
    },
    geomList: {
      type: Object,
      required: true,
      default: {}
    },
    openInfluenceFieldButton: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  emits:["seismicInfluenceSelect","EstimateResult"],
  data(){
    return {
      str: 'buildingDamageEstimate',
      map: null,
      center: [105, 34],
      zoom: 4,
      layer1: null,
      layer2: null,
      layer3: null,
      layer4: null,
      source: null,// 矢量绘制图层
      measure: null,
      measureSource: null,// 测量结果图层
      switchMapBool: false, // 卫星图
      zoomDefaultPositionBool: true,// 返回主界面
      showHideToolsBox: true,// 工具箱
      showHideMeasureTool:true,//显示|隐藏测量工具
      showHidePositionTool: true,// 定位工具
      measureDistanceBool: true,
      measureAreaBool: true,
      stopMeasureBool: true,
			clearMeasureBool: true,
      clearPositionBool: true,
			addPositionBool: true,
      helpTooltipElement:null,
      helpTooltip:null,
      measureTooltipElement:null,
      measureTooltip:null,
      measureTooltipArray:[],//全部测量结果Overlay数组
      showSeismicInfluenceSelectBool:false,
      showCreateEstimateResultBool: true,
      shpLegendArray: [],
      shpDataArray: [],
      shpDataLayer: null,
      shpDataLayer: null,
    }
  },
  watch: {
    shpLegendList:{//灾区范围图例列表
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){
          console.log("灾区范围图例列表");
          console.log(newVal);
          this.shpLegendArray = newVal;
        }
      },
      immediate:true
    },
    shpDataList: {//灾区范围空间数据列表
      handler: function(newVal,oldVal){
        console.log("灾区范围空间数据列表");
        console.log(newVal);
        this.shpDataArray = newVal;
        this.showShpDataArray();//显示灾区范围空间数据列表
      },
      immediate:true
    },
    geomList: {
      handler: function(newVal,oldVal){
        if(JSON.stringify(newVal) != '{}') {
          this.drawResultData(newVal);
        }
      },
      immediate:true
    },
    openInfluenceFieldButton: {
      handler: function(newVal,oldVal){
        this.showSeismicInfluenceSelectBool = newVal
      },
      immediate:true
    }
  },
  mounted(){
    let that = this
    this.$nextTick(function(){
      setTimeout(() => {
        // 初始化地图
        that.initMap()
      }, 200)
    })
  },
  methods: {
    initMap() {
      let that = this
      let targetMap = document.getElementById(this.str + '-map')
      // 清空targetMap
      targetMap.innerHTML = ''
      // 获取地图div的高度
      this.autodivheight()
      // 浏览器窗口发生变化时同时变化DIV高度
      window.onresize = this.autodivheight()
      if (this.map){ //避免地图重复加载
        return
      }
      //获取投影4490坐标系
      this.projection4490 = getProjection();
      //初始化地图信息
      this.map = new Map({
        target: targetMap.id,
        view: new View({
          center: this.center,
          maxZoom: 18,
          minZoom: 4,
          zoom: this.zoom,
          constrainResolution:true,//缩放地图可移动到最近的缩放级别（整数zoom级别）
          projection: 'EPSG:4490',
        })
      });
      this.layer1 = getTiandituVecMap()
      this.map.addLayer(this.layer1)
      this.layer2 = getTiandituVecText()
      this.map.addLayer(this.layer2)
      this.layer1.setZIndex(0)
      this.layer2.setZIndex(0)
      //矢量绘制图层
      this.source = new VectorSource({
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: that.source,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(vectorLayer);
      vectorLayer.setZIndex(2);
      //测量结果图层
      this.measureSource = new VectorSource({
        wrapX: false
      });
      let measureLayer = new VectorLayer({
        source: that.measureSource,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(measureLayer);
      //灾区范围空间数据图层
      this.shpDataLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.shpDataLayer);
      this.shpDataLayer.setZIndex(1);
      //地图移动事件
      this.map.on('moveend', function (event) {
        let center = that.map.getView().getCenter();
        let zoom = that.map.getView().getZoom();
        if(center[0]!=that.center[0] || center[1]!=that.center[1] || zoom!=that.zoom){
          //设置主界面图标文字
          that.zoomDefaultPositionBool = false;
        }else{//主界面
          //设置主界面图标文字
          that.zoomDefaultPositionBool = true;
        }
      });
      this.map.on('click', function(event){
        let coordinate = that.map.getEventCoordinate(event.originalEvent)
        if (that.showHidePositionTool == false) {
          document.getElementById(that.str + '-MousePositionLon').value = coordinate[0]
          document.getElementById(that.str + '-MousePositionLat').value = coordinate[1]
        }
      })
    },
    drawResultData(dataObject) {
      this.shpDataLayer.getSource().clear()
      let colors = [
        {levle: '10',name:'Ⅹ（10度）',color: 'rgba(140,0,0,0.7)'},
        {levle: '9',name:'Ⅸ（9度）',color: 'rgba(168,0,0,0.7)'},
        {levle: '8',name:'Ⅷ（8度）',color: 'rgba(200,40,40,0.7)'},
        {levle: '7',name:'Ⅶ（7度）',color: 'rgba(255,127,127,0.7)'},
        {levle: '6',name:'Ⅵ（6度）',color: 'rgba(255,190,190,0.7)'},
      ]
      let legned = colors.find(item => dataObject.dzIntensity == item.levle)
      if(legned != undefined) {
        let feature = new WKT().readFeature(dataObject.geom)
        let style = this.getPolyonTextStyle(legned.color,legned.color,legned.name)
        feature.setStyle(style)
        this.shpDataLayer.getSource().addFeature(feature)
        let extent = feature.getGeometry().getExtent();
        let allCoordinates = []
        if(extent.length==4){
          //全部经纬度--左下角
          allCoordinates.push([extent[0],extent[1]]);
          //全部经纬度--右上角
          allCoordinates.push([extent[2],extent[3]]);
        }
        this.showBoundingExtent(allCoordinates);//缩放到区域位置
      }
    },
    showBoundingExtent(coordinates){//缩放到区域位置
      console.log("缩放到区域位置");
      if (coordinates!=null && coordinates.length > 1) {
        const extent = boundingExtent(coordinates);
        //this.map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]});
        this.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
        //获取默认位置
        this.center = this.map.getView().getCenter();
        this.zoom = this.map.getView().getZoom();
      }
    },
    showSeismicInfluenceSelect(){//选择地震影响场
      if(this.showSeismicInfluenceSelectBool){
        this.shpDataLayer.getSource().clear();//清空
        this.showSeismicInfluenceSelectBool = false;
        this.$emit("seismicInfluenceSelect",false);
      }else{
        this.showSeismicInfluenceSelectBool = true;
        this.$emit("seismicInfluenceSelect",true);
      }
    },
    showCreateEstimateResult() {
      if(this.showCreateEstimateResultBool){
        this.showCreateEstimateResultBool = false;
        this.$emit("EstimateResult",false);
      }else{
        this.showCreateEstimateResultBool = true;
        this.$emit("EstimateResult",true);
      }
    },
    showShpDataArray(){//显示灾区范围空间数据列表
      if(this.shpDataLayer!=null){
        this.shpDataLayer.getSource().clear();//清空
        let list = this.shpDataArray;
        if(list!=null && list.length>0){
          //全部经纬度
          let allCoordinates = [];
          for(let i=0;i<list.length;i++){
            let intensity = list[i].intensity;//烈度
            //获取烈度获取图例序号
            let legendIndex = this.getLegendIndexByValue(intensity);
            if(legendIndex>=0){
              // let fillColor = this.getFillColorByValue(intensity);//获取烈度获取填充颜色
              let fillColor = this.shpLegendArray[legendIndex].color;
              let intensityStr = this.shpLegendArray[legendIndex].name;
              // let style = this.getPolyonStyle("rgba(255,255,255,0.7)",fillColor,0.5);
              //样式
              let style = this.getPolyonTextStyle("rgb(152,152,152)", fillColor, intensityStr);
              let geomText = list[i].geom;//空间数据
              if(geomText!=null && geomText!="" && geomText!="POLYGON EMPTY"){
                //空间数据
                let featureTmp = new WKT().readFeature(geomText);
                //设置属性
                featureTmp.setProperties({
                  type:"zqfw",//类型
                });
                featureTmp.setStyle(style);
                //添加矢量数据
                this.shpDataLayer.getSource().addFeature(featureTmp);
                //获取范围
                let extent = featureTmp.getGeometry().getExtent();
                if(extent.length==4){
                  //全部经纬度--左下角
                  allCoordinates.push([extent[0],extent[1]]);
                  //全部经纬度--右上角
                  allCoordinates.push([extent[2],extent[3]]);
                }
              }
            }
          }
          let that = this;
          setTimeout(function(){
            that.showBoundingExtent(allCoordinates);//缩放到区域位置
          },200);
        }
      }
    },
    //获取烈度获取图例序号
    getLegendIndexByValue(val){
      let index = null;
      if(val && this.shpLegendArray && this.shpLegendArray.length>0){
        for(let i=0;i<this.shpLegendArray.length;i++){
          if(this.shpLegendArray[i].value==val){
            index = i;
            break;
          }
        }
      }

      return index;
    },
    getPolyonTextStyle(color,backgroundColor,text){//多边形文字样式
      if(backgroundColor==null){
        backgroundColor = "rgba(0,0,0,0)";
      }
      let style = new Style({
        fill:new Fill({//填充样式
          color:backgroundColor
        }),
        stroke:new Stroke({//描绘
          width:1,//宽
          color:color
        }),
        text: new Text({
          text: text,
          fill: new Fill({
            color: 'black'
          }),
          offsetY:20,
          font:'bold 14px 微软雅黑',
        })
      });

      return style;
    },
    showBoundingExtent(coordinates){//缩放到区域位置
      console.log("缩放到区域位置");
      if (coordinates!=null && coordinates.length > 1) {
        const extent = boundingExtent(coordinates);
        //this.map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]});
        this.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
        //获取默认位置
        this.center = this.map.getView().getCenter();
        this.zoom = this.map.getView().getZoom();
      }
    },
    // 街道图与卫星图切换
    switchMap() {
      if (this.switchMapBool) {// 显示街道图
        this.switchMapBool = false
        if (this.layer1 == null) {
          this.layer1 = getTiandituVecMap()
          this.map.addLayer(this.layer1)
        }
        if (this.layer2 == null) {
          this.layer2 = getTiandituVecText()
          this.map.addLayer(this.layer2)
        }
        this.layer1.setVisible(true);
        this.layer2.setVisible(true);
        this.layer3.setVisible(false);
        this.layer4.setVisible(false);
        this.layer1.setZIndex(0);
        this.layer2.setZIndex(0);
      } else {
        this.switchMapBool = true
        if (this.layer3 == null) {
          this.layer3 = getTiandituImgMap()
          this.map.addLayer(this.layer3)
        }
        if (this.layer4 == null) {
          this.layer4 = getTiandituImgText()
          this.map.addLayer(this.layer4)
        }
        this.layer1.setVisible(false)
        this.layer2.setVisible(false)
        this.layer3.setVisible(true)
        this.layer4.setVisible(true)
        this.layer3.setZIndex(0)
        this.layer4.setZIndex(0)
      }
    },
    zoomDefaultPosition() {// 返回主界面
      this.map.updateSize();
      this.map.getView().setCenter(this.center);
      this.map.getView().setZoom(this.zoom);
      this.zoomDefaultPositionBool = true;
    },
    showHideToolsBoxDiv() {// 显示工具箱
      if (this.showHideToolsBox) {
        this.showHideToolsBox = false
        document.getElementById(this.str + '-ToolsBoxDiv').style.display = 'block'
      } else {
        this.showHideToolsBox = true
        document.getElementById(this.str + '-ToolsBoxDiv').style.display = 'none'
      }
    },
    measureToolBox() {
      if (this.showHideMeasureTool) {
        this.showHideMeasureTool = false
        document.getElementById(this.str + '-MeasureToolsDiv').style.display = 'block'
      } else {
        this.showHideMeasureTool = true
        document.getElementById(this.str + '-MeasureToolsDiv').style.display = 'none'
      }
    },
    positionToolBox() {
      if (this.showHidePositionTool) {
        this.showHidePositionTool = false
        document.getElementById(this.str + '-MousePositionDiv').style.display = 'block'
      } else {
        this.showHidePositionTool = true
        document.getElementById(this.str + '-MousePositionDiv').style.display = 'none'
      }
    },
    measureDistance() {
      if(this.source!=null){
        //地图工具箱--开启测距
        this.setMapToolBox('MeasureDistance');
        //设置样式
        this.measureDistanceBool = false;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    measureArea() {
      if(this.source!=null){
        //地图工具箱--开启测面
        this.setMapToolBox('MeasureArea');
        //设置样式
        this.measureAreaBool = false;
        this.measureDistanceBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    stopMeasure() {
      if(this.source!=null){
        //地图工具箱--停止测量
        this.setMapToolBox('StopMeasure');
        //设置样式
        this.stopMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.clearMeasureBool = true;
      }
    },
    clearMeasure () {
      if(this.source!=null){
        //地图工具箱--清空测量结果
        this.setMapToolBox('ClearMeasure');
        //设置样式
        this.clearMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
      }
    },
    clearPosition() {
      this.clearPositionBool = false;
      this.addPositionBool = true;
      //地图工具箱--清空
      this.setMapToolBox("Clear");
    },
    addPosition () {
      let that = this
      debugger
      this.clearPositionBool = true
      this.addPositionBool = false
      if (that.source != null) {
        let longitude = document.getElementById(this.str+"-MousePositionLon").value;
        let latitude = document.getElementById(this.str+"-MousePositionLat").value;
        //处理经纬度
        let lonlat = this.getLonLat(longitude,latitude);
        if (lonlat != null) {
          let featureTmp = new Feature({
            geometry: new Point(lonlat)
          });
          let style = that.getPointStyle()
          featureTmp.setStyle(style)
          featureTmp.setProperties({
            type: 'position',
            longitude: longitude,
            latitude: latitude
          })
          that.source.addFeature(featureTmp)
          that.map.getView().setCenter(lonlat)
          that.map.getView().setZoom(12)
        }
      }
    },
    getPointStyle(){// 定位点图标样式
      let style = new Style({
        image: new Icon({
          src: dingweiImg,
          anchor: [0.5, 1]
        }),
      });
      return style;
    },
    getLonLat(longitude, latitude) {
      let lonlat = null
      if (longitude != null && latitude != null & longitude != '' && latitude != '') {
        let lon = Number(longitude)
        let lat = Number(latitude)
        if (lon > 0 && lon < 180 && lat > 0 && lat < 180) {
          lonlat = [ lon, lat]
        }
      }
      return lonlat
    },
    //地图工具箱
    setMapToolBox(value){
      let that = this;
      if (value === 'Clear') {//清空
        //清空
        that.source.clear();
        //停止绘制|修改|拖拽|选择
        clearInteraction();
      }else if (value === 'Point' || value === 'LineString' || value === 'Polygon' || value === 'Circle') {//开启绘制
        //点|线|面|圆绘制
        //开启绘制
        startDrawInteraction(value,false);
      }else if (value === 'FreeHandLineString' || value === 'FreeHandPolygon') {//开启绘制
        //手绘线|手绘面
        value = value.split("FreeHand")[1];
        //开启绘制
        startDrawInteraction(value,true);
      }else if (value === 'StopDraw') {//停止绘制
        //停止绘制
        stopDrawInteraction();
      }else if (value === 'Snap') {//开启捕捉
        //开启捕捉
        startSnapInteraction();
      }else if (value === 'NotSnap') {//停止捕捉
        //停止捕捉
        stopSnapInteraction();
      }else if (value === 'Modify') {//开启修改
        //开启修改
        startModifyInteraction();
      }else if (value === 'NotModify') {//停止修改
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
      }else if (value === 'Drag') {//开启拖拽
        //开启拖拽
        startDragInteraction();
      }else if (value === 'NotDrag') {//停止拖拽
        //停止拖拽
        stopDragInteraction();
      }else if (value === 'Select') {//开启选择
        //开启选择
        startSelectInteraction();
      }else if (value === 'NotSelect') {//停止选择
        //停止选择
        stopSelectInteraction();
      } else if (value === 'MeasureDistance') {//开启测距
        //开启测距
        startMeasureInteraction('LineString');
      } else if (value === 'MeasureArea') {//开启测面
        //开启测面
        startMeasureInteraction('Polygon');
      } else if (value === 'StopMeasure') {//停止测量（测距|测面）
        //停止测量
        stopMeasureInteraction();
      } else if (value === 'ClearMeasure') {//清空测量结果
        //停止测量
        stopMeasureInteraction();
        //清空测量结果
        clearMeasureResult();
      }

      //停止绘制|修改|拖拽|选择
      function clearInteraction() {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
      }

      //停止捕捉
      function stopSnapInteraction(){
        if (that.snap) {
          that.map.removeInteraction(that.snap);
          that.snap = null;
        }
      }

      //开启捕捉
      function startSnapInteraction(){
        //停止捕捉
        stopSnapInteraction();
        //开启捕捉
        that.snap = new Snap({
          source: that.source
        });
        that.map.addInteraction(that.snap);
      }

      //停止拖拽
      function stopDragInteraction() {
        //停止拖拽
        if (that.drag) {
          that.map.removeInteraction(that.drag);
          that.drag = null;
        }
      }

      //开启拖拽
      function startDragInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止修改
        stopModifyInteraction();
        //开启选择
        startSelectInteraction();
        //停止拖拽
        stopDragInteraction();
        //开启拖拽
        that.drag = new Translate({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.drag);
      }

      //停止修改
      function stopModifyInteraction() {
        //停止修改
        if (that.modify) {
          that.map.removeInteraction(that.modify);
          that.modify = null;
        }
      }

      //开启修改
      function startModifyInteraction() {
        //停止绘制
        stopDrawInteraction();
        //开启选择
        startSelectInteraction();
        //停止修改
        stopModifyInteraction();
        //开启修改
        // that.modify = new Modify({
        // 	features: that.select.getFeatures()
        // });
        let b = that.map.getInteractions()
        that.modify = new Modify({
          source: that.source
        });
        that.map.addInteraction(that.modify);
      }

      //停止选择
      function stopSelectInteraction() {
        //停止选择
        if (that.select) {
          that.map.removeInteraction(that.select);
          that.select = null;
        }
      }

      //开启选择
      function startSelectInteraction() {
        //停止选择
        stopSelectInteraction();
        //开启选择
        that.select = new Select({
          wrapX: false
        });
        that.map.addInteraction(that.select);
      }

      //停止绘制
      function stopDrawInteraction() {
        //停止绘制
        if (that.draw) {
          that.map.removeInteraction(that.draw);
          that.draw = null;
        }
      }

      //开启绘制
      function startDrawInteraction(type,bool) {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
        if(bool){//手绘线|手绘面
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20,
            freehand: true
          });
          that.map.addInteraction(that.draw);
        }else{//点|线|面|圆绘制
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20
          });
          that.map.addInteraction(that.draw);
          //绘制结束时触发的事件
          that.draw.on('drawend', function(e) {
            if (e.feature && e.feature.getGeometry() instanceof CircleDraw) {
              let radius = document.getElementById('drawCircleRadius').value
              if (radius != '') {
                radius = radius * 1000
                let metersPerUnit = that.map.getView().getProjection().getMetersPerUnit();
                let circleRadius =  radius / metersPerUnit;
                e.feature.getGeometry().setRadius(circleRadius)
              }
            }
            let geometry = e.feature.getGeometry();
            //停止绘制
            stopDrawInteraction();
            let style
            //设置样式
            if (type == 'Point') {
              style = that.drawPointStyle()
            } else {
              style = that.getPolyonStyle("red");
            }
            e.feature.setStyle(style);
            //计算面积
            if (geometry instanceof Polygon || geometry instanceof CircleDraw) {
              let area = getPolygonArea(geometry);
              //清空查询行政区划列表
              that.parentdistrictList = [];
              //清空区域查询行政区划名称列表
              that.parentdistrictNameList = [];
              //清空区域查询行政区划编码列表
              that.parentdistrictCodeList = [];
              //正在查询
              that.mapLoading("正在查询，请稍候...");
              //新查询绘制区域经纬度任务地区
              that.queryDrawAreaNew(e.feature);
              /*//几何查询--省值
              that.queryProvince(e.feature);
              //几何查询--省会市值
              that.queryProCenCity(e.feature);
              //几何查询--市值
              that.queryCity(e.feature);
              //几何查询--区县值
              that.queryArea(e.feature);
              //获取多边形面内的均匀点分布数组
              let allLonLatArr = that.getPolygonExtentPoints(geometry);
              //查询绘制区域经纬度点地址
              that.queryDrawArea(e.feature,allLonLatArr);*/
              //设置属性
              e.feature.setProperties({area: area});
            }
          });
        }
      }
      //计算面积
      function getPolygonArea (geometry) {
        let area 
        let output
        let circleArea = geometry
        if (geometry instanceof CircleDraw) {
          circleArea = fromCircle(geometry)
        }
        area = getArea(circleArea, {projection: 'EPSG:4490'})
        // 这里一定要给坐标，和地图坐标保持一致，否则面积不准
        output = Math.round((area / 1000000) * 100) / 100;//平方公里
        return output;
      }

      ////////////////////////////////////////////////////////////////////测量工具箱
      //格式化距离
      function formatLength(line) {
        const length = getLength(line, {projection: 'EPSG:4490'});
        let output;
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm';
        }
        return output;
      }

      //格式化面积
      function formatArea(polygon) {
        const area = getArea(polygon, {projection: 'EPSG:4490'});
        let output;
        if (area > 10000) {
          output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
        }
        return output;
      }

      //创建新的提示tip
      function createHelpTooltip() {
        if (that.helpTooltipElement!=null) {
          that.helpTooltipElement.parentNode.removeChild(that.helpTooltipElement);
        }
        that.helpTooltipElement = document.createElement('div');
        that.helpTooltipElement.className = 'ol-tooltip hidden';
        that.helpTooltip = new Overlay({
          element: that.helpTooltipElement,
          offset: [15, 0],
          positioning: 'center-left',
        });
        that.map.addOverlay(that.helpTooltip);
      }

      //创建新的测量提示
      function createMeasureTooltip() {
        if (that.measureTooltipElement!=null) {
          that.measureTooltipElement.parentNode.removeChild(that.measureTooltipElement);
        }
        that.measureTooltipElement = document.createElement('div');
        that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
        that.measureTooltip = new Overlay({
          element: that.measureTooltipElement,
          offset: [0, -15],
          positioning: 'bottom-center',
          stopEvent: false,
          insertFirst: false,
        });
        that.map.addOverlay(that.measureTooltip);
      }
      //开启测量工具
      function startMeasureInteraction(type) {
        //停止测量工具
        stopMeasureInteraction();

        console.log(type);
        //开启测量工具--绘制
        that.measure = new Draw({
          source: that.measureSource,
          type: type,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.5)',
              lineDash: [10, 10],
              width: 2,
            }),
            image: new Circle({
              radius: 5,
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.7)',
              }),
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)',
              }),
            }),
          }),
        });
        that.map.addInteraction(that.measure);

        //创建新的测量提示
        createMeasureTooltip();
        //创建新的提示tip
        createHelpTooltip();

        let listener;
        that.measure.on('drawstart', function (evt) {
          //设置sketch
          that.sketch = evt.feature;

          let tooltipCoord = evt.coordinate;

          listener = that.sketch.getGeometry().on('change', function (evt) {
            const geom = evt.target;
            let output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            that.measureTooltipElement.innerHTML = output;
            that.measureTooltip.setPosition(tooltipCoord);
          });
        });
        //完成测量绘制
        that.measure.on('drawend', function () {
          that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
          that.measureTooltip.setOffset([0, -7]);
          //添加到数组
          that.measureTooltipArray.push(that.helpTooltip);
          //添加到数组
          that.measureTooltipArray.push(that.measureTooltip);
          //清空sketch
          that.sketch = null;
          //清空tooltip
          that.measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
        });
      }

      //停止测量工具
      function stopMeasureInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止测量工具
        if (that.measure) {
          that.map.removeInteraction(that.measure);
          that.measure = null;
          //隐藏提示tip
          that.helpTooltipElement.classList.add('hidden');
          //移除测量提示
          if(that.helpTooltip!=null){
            that.map.removeOverlay(that.helpTooltip);
          }
          if(that.measureTooltip!=null){
            that.map.removeOverlay(that.measureTooltip);
          }
        }
      }
      
      //清空测量结果
      function clearMeasureResult(){
        if(that.measureSource!=null){
          //清空测量结果
          that.measureSource.clear();
          //清空测量结果提示数组
          if(that.measureTooltipArray.length>0){
            for(let i=0;i<that.measureTooltipArray.length;i++){
              that.map.removeOverlay(that.measureTooltipArray[i]);
            }
            that.measureTooltipArray = [];
          }
        }
      }
    },
    autodivheight() {//自动获取div高度
      //获取浏览器窗口高度
      let winHeight = 0;
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
      }
      //通过深入Document内部对body进行检测，获取浏览器窗口高度
      if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
      }
      //全屏时窗口高度:864px,地图div高度:754px
      let tempHeight = 864;
      let mapTempHeight = 754;
      let mapHeight = winHeight - tempHeight + mapTempHeight;
      //最小高度
      if(mapHeight<480){
        mapHeight = 480;
      }
      //设置地图高度
      document.getElementById(this.str+"-map").style.height= mapHeight +"px";
      console.log("窗口高度："+winHeight+"地图高度："+mapHeight);
      //resize事件--刷新地图,确保地图不变形
      if(this.map){
        this.map.updateSize();
        console.log("resize事件--刷新地图,确保地图不变形");
      }
    },
  } 
})
</script>